<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import { useRoute } from 'vue-router';
    import { useArticleStore } from '@/stores/article';

    import Main from '@/views/Main/index.vue';
    import BlogList from '@/views/Main/Home/components/BlogList/index.vue';
    import RecommendTab from '@/views/Sidebar/components/Recommend/index.vue';
    import LastCommentTab from '@/views/Sidebar/components/LastComment/index.vue';

    const route = useRoute();
    const articleStore = useArticleStore();

    // 搜索标题
    const p = ref(route.query.p);

    onMounted(() => {
        if(p.value) {
            // 初始化数据
            articleStore.initParam();
            // 获取文章列表
            articleStore.getArticleList({ p: p.value.toString() });
            // 加载结束
            articleStore.loading = false;
        }
    });

</script>
<template>
    <Main>
        <template #navigation>
            <div class="leave_position">
                <svg-icon href='#icon-position' width="13px" height="13px"></svg-icon>
                &nbsp;您现在的位置是：
                <router-link style="color: black;font-size: 14px;" to="/">
                    首页
                </router-link>
                <label>&nbsp;>&nbsp;</label>
                <template v-if="!p">
                    <router-link style="color: black;font-size: 14px;" to="/news">
                        生活日常
                    </router-link>
                </template>
                <template v-if="p">
                    <router-link style="color: black;font-size: 14px;" :to="'/seach?p=' + p">
                        搜索"{{ p }}"
                    </router-link>
                </template>
            </div>
        </template>
        <template #leftColumn>
            <section class="seach-box" v-if="p">
                <div class="content">
                    搜索 <span style="color: red">{{p}}</span> 的结果 (总共搜索到 {{ articleStore.articleData.length }} 条记录)
                </div>
            </section>
            <!-- 博客列表 -->
            <blog-list :data="articleStore.articleData" :loading="articleStore.loading" />
        </template>
        <template #rightColumn>
            <!-- 站长推荐 -->
            <recommend-tab />
            <!-- 最新评论 -->
            <last-comment-tab />
        </template>
    </Main>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />